<template>
  <div id="addSpacePage">
    <a-card :bordered="false" class="form-container">
      <h2 style="margin-bottom: 16px">
        {{ route.query?.id ? '修改' : '创建' }}{{ SPACE_TYPE_MAP[spaceType] }}
      </h2>

      <a-form layout="vertical" :model="formData" @finish="handleSubmit" class="animated-form">
        <a-form-item label="空间名称" name="spaceName">
          <a-input v-model:value="formData.spaceName" placeholder="请输入空间名称" allow-clear class="custom-input" />
        </a-form-item>
        <a-form-item label="空间级别" name="spaceLevel">
          <a-select
            v-model:value="formData.spaceLevel"
            :options="SPACE_LEVEL_OPTIONS"
            placeholder="请选择空间级别"
            class="custom-select"
            allow-clear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" class="submit-btn" :loading="loading">
            提交
          </a-button>
        </a-form-item>
      </a-form>

      <a-card title="空间级别介绍" class="info-card">
        <a-typography-paragraph>
          * 目前仅支持开通普通版，如需升级空间，请联系
          <a href="https://gitee.com/xwqkwl" target="_blank">吉首大学-徐伟强(18974901186)</a>。
        </a-typography-paragraph>
        <a-typography-paragraph v-for="spaceLevel in spaceLevelList" :key="spaceLevel.text">
          <span class="icon"><component :is="getIconComponent(spaceLevel.icon)" /></span>
          <strong>{{ spaceLevel.text }}：</strong> 大小 {{ formatSize(spaceLevel.maxSize) }}， 数量 {{ spaceLevel.maxCount }}
        </a-typography-paragraph>
      </a-card>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  addSpaceUsingPost,
  getSpaceVoByIdUsingGet,
  listSpaceLevelUsingGet,
  updateSpaceUsingPost
} from '@/api/spaceController.ts'
import { message } from 'ant-design-vue'
import { SPACE_LEVEL_ENUM, SPACE_LEVEL_OPTIONS, SPACE_TYPE_ENUM, SPACE_TYPE_MAP } from '@/constants/space.ts'
import { formatSize } from '../utils'
import { StarOutlined, CrownOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'

// 空间类别
const spaceType = computed(() => {
  if (route.query?.type) {
    return Number(route.query.type)
  }
  return SPACE_TYPE_ENUM.PRIVATE
})


const space = ref(null)
const formData = reactive({
  spaceName: '',
  spaceLevel: SPACE_LEVEL_ENUM.COMMON,
})
const loading = ref(false)
const router = useRouter()
const spaceLevelList = ref([
  { text: '普通版', maxSize: 100, maxCount: 5, icon: 'StarOutlined' },
  { text: '高级版', maxSize: 500, maxCount: 20, icon: 'CrownOutlined' },
  { text: '专业版', maxSize: 1000, maxCount: 50, icon: 'CheckCircleOutlined' },
])
const route = useRoute()
const oldSpace = ref(null)

const fetchSpaceLevelList = async () => {
  const res = await listSpaceLevelUsingGet()
  if (res.data.code === 0 && res.data.data) {
    spaceLevelList.value = res.data.data
  } else {
    message.error('加载空间级别失败，' + res.data.message)
  }
}

onMounted(() => {
  fetchSpaceLevelList()
  getOldSpace()
})

const handleSubmit = async () => {
  loading.value = true
  let res
  if (oldSpace.value?.id) {
    res = await updateSpaceUsingPost({ id: oldSpace.value.id, ...formData })
  } else {
    res = await addSpaceUsingPost({ spaceType: spaceType.value,...formData })
  }
  if (res.data.code === 0 && res.data.data) {
    message.success('操作成功')
    router.push({ path: `/space/${oldSpace.value?.id ?? res.data.data}` })
  } else {
    message.error('操作失败，' + res.data.message)
  }
  loading.value = false
}

const getOldSpace = async () => {
  const id = route.query?.id
  if (id) {
    const res = await getSpaceVoByIdUsingGet({ id })
    if (res.data.code === 0 && res.data.data) {
      oldSpace.value = res.data.data
      formData.spaceName = res.data.data.spaceName
      formData.spaceLevel = res.data.data.spaceLevel
    }
  }
}

const getIconComponent = (iconName: string) => {
  switch (iconName) {
    case 'StarOutlined':
      return StarOutlined
    case 'CrownOutlined':
      return CrownOutlined
    case 'CheckCircleOutlined':
      return CheckCircleOutlined
    default:
      return StarOutlined
  }
}
</script>

<style scoped>
#addSpacePage {
  max-width: 900px;
  margin: 50px auto;
  padding: 25px;
  background: linear-gradient(to bottom right, #f4f7fc, #eaeefb);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}

.form-container {
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: white;
  transition: transform 0.3s ease-in-out;
  backdrop-filter: blur(10px);
}

.form-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 35px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.animated-form {
  transition: transform 0.2s ease-in-out;
}

.custom-input, .custom-select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s ease-in-out;
}

.custom-input:focus, .custom-select:focus {
  border-color: #1890ff;
}

.submit-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  background: linear-gradient(to right, #1890ff, #00c6fb);
  border: none;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.submit-btn:hover {
  background: linear-gradient(to right, #00c6fb, #1890ff);
  transform: scale(1.05);
}

.info-card {
  margin-top: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  background: white;
  backdrop-filter: blur(10px);
}

.info-card h3 {
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}

.info-card p {
  color: #666;
  line-height: 1.6;
}

.icon {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}
</style>



